<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>

    <div class="section-header">全球人力资源局势</div>
    <el-radio-group v-model="radio" size="medium" class="radio-group" @change="handleChange">
      <el-radio-button label="温江"></el-radio-button>
      <el-radio-button label="成都"></el-radio-button>
      <el-radio-button label="四川"></el-radio-button>
      <el-radio-button label="中国"></el-radio-button>
      <el-radio-button label="全球"></el-radio-button>
    </el-radio-group>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentIn_TalentSourceDistribution } from '@/api/data'
import 'echarts/extension/bmap/bmap'
import "echarts/map/js/china.js";
import { MP } from '@/assets/js/bmap'
import worldMap from 'echarts/map/json/world'
import chinaMap from 'echarts/map/json/china'
import sichuanMap from 'echarts/map/json/province/sichuan'
import chengduMap from './mapJson/chengdu'
import wenjiangMap from './mapJson/wenjiang3'
let chartsInit = null;
export default {
  data() {
    return {
	  lastRadio: -1,
      chartsDom: {},
      radio: '全球',
      jz:true,
      listMap:[
        {
          name:'寿安',
          value:20,
          lal:'103.729671,30.818696'
        },
        {
          name:'万春',
          value:20,
          lal:'103.814913,30.745976'
        },
        {
          name:'金马',
          value:20,
          lal:'103.820417,30.634037'
        },
        {
          name:'和盛',
          value:20,
          lal:'103.772475,30.724908'
        },
        {
          name:'涌泉',
          value:20,
          lal:'103.887166,30.674027'
        },
        {
          name:'公平',
          value:20,
          lal:'103.887166,30.704027'
        },
        {
          name:'柳城',
          value:20,
          lal:'103.833694,30.694563'
        },
        {
          name:'永宁',
          value:20,
          lal:'103.910423,30.730544'
        },
        {
          name:'天府',
          value:20,
          lal:'103.801352,30.673225'
        },
      ]
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    },
    mapJson() {
      switch(this.radio) {
        case '温江':
        return wenjiangMap;
        case '成都':
        return chengduMap;
        case '四川':
        return sichuanMap;
        case '中国':
        return chinaMap;
        case '全球':
        return worldMap;
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      // MP('WwaKthc9GOHU1djrH1TGmrGePOvgMjl0').then(BMap => {
      //   // const map = new BMap.Map("charts");
      //   // console.log(map)
      //   // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        
      // })
      this.init();
    })
	
	setInterval(()=>{
		console.log('setInterval: ' + this.mapIndex);
		if (this.mapIndex != '' && this.mapIndex != undefined && this.lastRadio != this.mapIndex){
			if(this.mapIndex == 1){
				this.radio = '温江'
			} else if (this.mapIndex == 2){
				this.radio = '成都'
			} else if (this.mapIndex == 3){
				this.radio = '四川'
			} else if (this.mapIndex == 4){
				this.radio = '中国'
			} else if (this.mapIndex == 5){
				this.radio = '全球'
			}
			this.init();
			this.lastRadio = this.mapIndex;
		}
	},1000);
  },
  watch: {
    // radio(val) {
    //   this.$nextTick(_=>{
    //     this.init();
    //   });
    // }
  },
  methods: {
    handleChange() {
      this.$nextTick(_=>{
        this.init();
      });
    },
    init() {
      this.jz=false
      let range = 19;
      switch(this.radio){
        case '温江':
          range = 19;
          break;
        case '成都':
          range = 20;
          break;
        case '四川':
          range = 21;
          break;
        case '中国':
          range = 22;
          break;
        case '全球':
          range = 23;
        break;
        default:
          break;
      }
      let params = {
        range,
        date: this.dateProp.date
      }
      get_TalentIn_TalentSourceDistribution(params)
      .then(res=>{
        this.jz=true
        let dataa={}
        dataa.data=this.listMap
         this.chartInit(dataa,res.data);
      })
    },
    chartInit(dataa,mapJson) {
      this.$echarts.registerMap('mapStr', this.mapJson, {
          Alaska: {              // 把阿拉斯加移到美国主大陆左下方
              left: -131,
              top: 25,
              width: 15
          },
          Hawaii: {
              left: -110,        // 夏威夷
              top: 28,
              width: 5
          },
          'Puerto Rico': {       // 波多黎各
              left: -76,
              top: 26,
              width: 2
          }
      });
      let data = [];
	  var max = 0;
	  for(var i=0;i<mapJson.data.length;i++){
		  if (max < mapJson.data[i].value){
			  max = mapJson.data[i].value;
		  }
	  }
	  var tempIndex=(max+'').toString().length;
	  var temp = (max+'').substring(0, tempIndex-1);
	  var headNum = Number(temp)+1;
	  for(var i=0;i<(max+'').length-1;i++){
		  max = headNum*10;
	  }
	  
      if(mapJson.data.length > 0){
        data = mapJson.data;
      }
      
      let option = {
            tooltip: {
                trigger: 'item',
                formatter(param){
                  return param.data.name + ': '+param.data.value[param.data.value.length-1]
                }
            },
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                data:['人才分布'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: max,
                splitNumber: 10,
                color: ['#05af9d','#7cc86d','#feffa9'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'mapStr',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                // regions: [      //对不同的区块进行着色
                // {
                //   name: '柳城街道', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#FF00FF'
                //       }
                //   }
                // },{
                //   name: '公平街道', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#FF0000'
                //       }
                //   }
                // },{
                //   name: '涌泉街道', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#FF6EB4'
                //       }
                //   }
                // },{
                //   name: '天府街道', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#EED2EE'
                //       }
                //   }
                // },{
                //   name: '和盛镇', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#D1EEEE'
                //       }
                //   }
                // },{
                //   name: '金马镇', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#BF3EFF'
                //       }
                //   }
                // },{
                //   name: '永宁镇', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#98F5FF'
                //       }
                //   }
                // },{
                //   name: '万春镇', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#7A378B'
                //       }
                //   }
                // },{
                //   name: '寿安镇', //区块名称
                //   itemStyle: {
                //       normal: {
                //           areaColor: '#00FF00'
                //       }
                //   }
                // }],
                itemStyle: {
                    normal: {
                        areaColor: '#143470',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#152b5e'
                    }
                }
            },
            series: [
                {
                    name: '人才分布',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: this.convertData(dataa.data,data),
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    }
                }
            ]
        };
        // console.log(chartsInit);
      chartsInit && chartsInit.clear();
      chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
      chartsInit.dispatchAction({
          type: 'showTip',
          seriesIndex:0,  // 显示第几个series
          dataIndex: 0 // 显示第几个数据
      });
    },
    convertData(mapJson,data) {
      var res = [];
      var ress=[]
      if(this.radio=='温江'){
        mapJson.map(v=>{
        data.map(z=>{
          if(v.name==z.name){
            ress.push({name:v.name,value:z.value,lal:v.lal})
          }
        })
      })
      ress.map((item,i)=>{
        res.push({
          name: item.name,
          value: item.lal.split(',').concat(item.value)
        });
      })
      }else{
        data.map((item,i)=>{
        res.push({
          name: item.name,
          value: item.lal.split(',').concat(item.value)
        });
      })
      }
      
      console.log(res)
      // var res = [];
      // for (var i = 0; i < data.length; i++) {
      //     var geoCoord = geoCoordMap[data[i].name];
      //     if (geoCoord) {
      //         res.push({
      //             name: data[i].name,
      //             value: geoCoord.concat(data[i].value)
      //         });
      //     }
      // }
      // console.log(res)
      return res;
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
    position relative
  .radio-group
    position absolute
    left 30px
    top 65px
    z-index 1000
    >>> .el-radio-button.is-active .el-radio-button__inner
      background-color #037880
      color #ffffff
      box-shadow -1px 0 0 #037880
    >>> .el-radio-button__inner
      background-color transparent
      color #35ced8
      border 1px solid #037880
</style>